<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<style>
    .col{
        background-color: #FDFEFE;
    }

    .content div{
        display: none;
    }
    .show{
        display: block;
    }
    #div ul {
        margin-top: 0px;

    }
     ul li{
        display: inline-block;
        width: 100px;
        border: 1px solid #212F3D;
        text-align: center;
        padding-left:22px;
        padding-right:22px;
        background-color: #ff6700;
    }
    #div{
        border: 1px solid #212F3D;
        width: 490px;
        height: 400px;
    }
</style>
<body>
    <div id="div">
        <ul class="header">
            <li >女人</li>
            <li >情感</li>
            <li >亲子</li>
        </ul>
        <div id="div1" class="content">
            <div style="display: block">女人女人女人女人女人女人女人女人女人女人女人女人</div>
            <div >情感情感情感情感情感情感情感情感情感情感情感情感情感</div>
            <div >亲子亲子亲子亲子亲子亲子亲子亲子亲子亲子亲子亲子亲子</div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $(".header li").mouseover(function () {
            $(this).css("background-color","white").siblings().css("background-color","#ff6700");
            var index = $(this).index();
            console.log(index);
            $(".content div").eq(index).css("display","block").siblings().css("display","none")
        })
    })

</script>